<!doctype html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<!-- Tests various permutations of composition underlines in LTR and RTL text.
  These are normally used by foreign language IME (Input Method Extension). -->
<div dir="rtl" style="float: right;">
    <p>RTL</p>
    <div id="markRtlAll" dir="rtl">abcdef</div>
    <div id="markRtlAllThick">abcdef</div>
    <div id="markRtlAllDotted">abcdef</div>
    <div id="markRtlAllDashed">abcdef</div>
    <div id="markRtlAllSquiggled">abcdef</div>
    <div id="markRtlNone">abcdef</div>
    <div id="markRtlBeginning">abcdef</div>
    <div id="markRtlAllExceptFirstAndLast">abcdef</div>
    <div id="markRtlEnd">abcdef</div>
    <div id="markRtlAcrossNodes"><div>abcdef<span>ghijkl</span></div><div>mnopqr</div></div>
</div>

<div style="float: left;">
    <p>LTR</p>
    <div id="markAll">abcdef</div>
    <div id="markAllThick">abcdef</div>
    <div id="markAllDotted">abcdef</div>
    <div id="markAllDashed">abcdef</div>
    <div id="markAllSquiggled">abcdef</div>
    <div id="markAllNone">abcdef</div>
    <div id="markAllDifferentColors">abcdef</div>
    <div id="markBeginning">abcdef</div>
    <div id="markAllExceptFirstAndLast">abcdef</div>
    <div id="markEnd">abcdef</div>
    <div id="markNothingZero">abcdef</div>
    <div id="markNothingEnd">abcdef</div>
    <div id="markAcrossNodes"><div>abcdef<span>ghijkl</span></div><div>mnopqr</div></div>
</div>

<script>
function highlightRange(elem, start, end, underlineColor, thick, underlineStyle, backgroundColor) {
    var range = document.createRange();
    var textNode = elem.firstChild;
    range.setStart(textNode, start);
    range.setEnd(textNode, end);
    if (typeof internals !== 'undefined')
        internals.addCompositionMarker(range, underlineColor, thick, underlineStyle, 'transparent', backgroundColor);
};

function highlightRangeSimple(elem, start, end) {
    highlightRange(elem, start, end, 'orange', 'thin', 'solid', 'lightBlue');
};

function highlightAcrossNodes(startNode, start, endNode, end) {
    var range = document.createRange();
    range.setStart(startNode, start);
    range.setEnd(endNode, end);
    if (typeof internals !== 'undefined')
        internals.addCompositionMarker(range, 'orange', 'thin', 'solid', 'transparent', 'lightBlue');
};

onload = runAfterLayoutAndPaint(function() {
    highlightRangeSimple(markAll, 0, 6);
    highlightRange(markAllThick, 0, 6, 'orange', 'thick', 'solid', 'lightBlue');
    highlightRange(markAllDotted, 0, 6, 'orange', 'thick', 'dot', 'lightBlue');
    highlightRange(markAllDashed, 0, 6, 'orange', 'thick', 'dash', 'lightBlue');
    highlightRange(markAllSquiggled, 0, 6, 'orange', 'thick', 'squiggle', 'lightBlue');
    highlightRange(markAllNone, 0, 6, 'orange', 'thick', 'none', 'lightBlue');
    highlightRange(markAllDifferentColors, 0, 6, 'purple', 'thick', 'solid', 'lightYellow');
    highlightRangeSimple(markBeginning, 0, 3);
    highlightRangeSimple(markAllExceptFirstAndLast, 1, 5);
    highlightRangeSimple(markEnd, 3, 6);
    highlightRangeSimple(markNothingZero, 0, 0);
    highlightRangeSimple(markNothingEnd, 6, 6);

    highlightRangeSimple(markRtlAll, 0, 6);
    highlightRange(markRtlAllThick, 0, 6, 'orange', 'thick', 'solid', 'lightBlue');
    highlightRange(markRtlAllDotted, 0, 6, 'orange', 'thick', 'dot', 'lightBlue');
    highlightRange(markRtlAllDashed, 0, 6, 'orange', 'thick', 'dash', 'lightBlue');
    highlightRange(markRtlAllSquiggled, 0, 6, 'orange', 'thick', 'squiggle', 'lightBlue');
    highlightRange(markRtlNone, 0, 6, 'orange', 'thick', 'none', 'lightBlue');
    highlightRangeSimple(markRtlBeginning, 0, 3);
    highlightRangeSimple(markRtlAllExceptFirstAndLast, 1, 5);
    highlightRangeSimple(markRtlEnd, 3, 6);

    highlightAcrossNodes(markAcrossNodes.childNodes[0].firstChild, 3,
        markAcrossNodes.childNodes[1].firstChild, 3);
    highlightAcrossNodes(markRtlAcrossNodes.childNodes[0].firstChild, 3,
        markRtlAcrossNodes.childNodes[1].firstChild, 3);
}, true);
</script>
